<template>
  <div class="info-wrap">
    <div class="flex-center">
      <Title title="上刊状态" style="font-size:16px; margin:6px 0 8px 0">
        <div v-if="isNewVersion" class="flex-center pointer" @click="openStatusDialog">
        <img :src="noteIcon" alt="" class="note-icon">
        <span  class="link-btn">变更日志</span>
        </div>
      </Title>
      <editBtn v-if="hasRouteAuth('medium:dataEdit:journalInfo') && detailInfo.isEditAuth && isNewVersion" @handleClick="editModule"/>
    </div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="上刊状态：" style="margin-bottom: 0px;">
            <div>{{ detailInfo.additionalKey.journalStatus | journalStatusFilter }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选号状态：" style="margin-bottom: 0px;">
            <div>{{ detailInfo.additionalKey.selectionStatus | selectStatusFilter }}</div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="上刊日期：" style="margin-bottom: 0px;">
            <ToolTip :content="format(detailInfo.additionalKey.publicationTime,'YYYY/MM/DD')" />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="上刊月份：" style="margin-bottom: 0px;">
            <ToolTip :content="format(detailInfo.additionalKey.publicationMonth,'YYYY/MM')" />
          </el-form-item>
        </el-col>
        <el-col v-if="isJournalPlatform" :span="8">
          <el-form-item label="上刊节点：" style="margin-bottom: 0px;">
            <div>{{ detailInfo.additionalKey.journalNode | journalNodeFilter }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <statusLogDialog ref="statusDialog"/>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import mixins from './mixins';
import { journalStatusFilter, selectStatusFilter, journalNodeFilter } from '@/utils/const/resouce';
import caseColumn from '@/components/resource/table/caseColumn';
import Title from '@/components/Title';
import statusLogDialog from '@/views/resource/components/journalStatusLog';
import noteIcon from '@/assets/medium/note.png';

export default {
  components: { caseColumn, Title, statusLogDialog },
  filters: {
    journalStatusFilter,
    selectStatusFilter,
    journalNodeFilter
  },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => ({})
    },
    isCommon: {
      type: Boolean,
      default: false
    },
    isJournalPlatform: {
      type: Boolean,
      default: false
    },
    isNewVersion: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      noteIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    format,
    openStatusDialog() {
      this.$refs.statusDialog.openDialog(this.detailInfo.id);
    }
  }
};
</script>
<style lang="scss" scoped>
.link-btn {
  white-space: nowrap;
  color: #406EFF;
  cursor: pointer;
}
.note-icon {
  width: 14px;
  height: 14px;
  margin:0 4px 0 8px;
}
</style>
